import React, { useState, useEffect } from 'react';
import { Card, Row, Col } from 'antd';
import ReactECharts from 'echarts-for-react';
import { ArrowUpOutlined } from '@ant-design/icons';
import './App.css';

const Dashboard = () => {
  // 生成随机数据的辅助函数
  const generateRandomData = (min, max, length) => {
    return Array.from({ length }, () => Math.floor(Math.random() * (max - min + 1)) + min);
  };

  const generateRandomValue = (min, max) => {
    return Math.floor(Math.random() * (max - min + 1)) + min;
  };

  // 状态管理
  const [cardData, setCardData] = useState([
    { title: '总访问量', value: '0', color: '#1890ff' },
    { title: '日活用户', value: '0', color: '#52c41a' },
    { title: '转化率', value: '0', color: '#faad14' },
  ]);

  const [barData, setBarData] = useState({
    current: generateRandomData(200, 400, 7),
    last: generateRandomData(200, 400, 7)
  });

  const [lineData, setLineData] = useState(generateRandomData(100, 300, 6));
  const [pieData, setPieData] = useState([
    { value: generateRandomValue(10, 50), name: '产品A' },
    { value: generateRandomValue(10, 50), name: '产品B' },
    { value: generateRandomValue(10, 50), name: '产品C' },
    { value: generateRandomValue(10, 50), name: '产品D' }
  ]);

  const [heatmapData, setHeatmapData] = useState([]);

  // 更新热力图数据
  const updateHeatmapData = () => {
    const days = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
    const hours = Array.from({ length: 24 }, (_, i) => `${i.toString().padStart(2, '0')}:00`);
    const newData = [];
    
    days.forEach((day, dayIndex) => {
      hours.forEach((hour, hourIndex) => {
        newData.push([hourIndex, day, generateRandomValue(0, 3)]);
      });
    });
    
    setHeatmapData(newData);
  };

  // 定期更新数据
  useEffect(() => {
    const updateData = () => {
      // 更新卡片数据
      setCardData([
        { title: '总访问量', value: `${generateRandomValue(15, 25)}k`, color: '#1890ff' },
        { title: '日活用户', value: `${generateRandomValue(12, 20)}k`, color: '#52c41a' },
        { title: '转化率', value: `${generateRandomValue(15, 25)}k`, color: '#faad14' },
      ]);

      // 更新柱状图数据
      setBarData({
        current: generateRandomData(200, 400, 7),
        last: generateRandomData(200, 400, 7)
      });

      // 更新折线图数据
      setLineData(generateRandomData(100, 300, 6));

      // 更新饼图数据
      setPieData([
        { value: generateRandomValue(10, 50), name: '产品A' },
        { value: generateRandomValue(10, 50), name: '产品B' },
        { value: generateRandomValue(10, 50), name: '产品C' },
        { value: generateRandomValue(10, 50), name: '产品D' }
      ]);

      // 更新热力图数据
      updateHeatmapData();
    };

    // 初始更新
    updateData();

    // 每5秒更新一次数据
    const interval = setInterval(updateData, 5000);

    return () => clearInterval(interval);
  }, []);

  // 柱状图配置
  const barOption = {
    tooltip: {
      trigger: 'axis',
    },
    legend: {
      data: ['本月', '上月']
    },
    xAxis: {
      type: 'category',
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '本月',
        type: 'bar',
        data: barData.current,
        color: '#52c41a'
      },
      {
        name: '上月',
        type: 'bar',
        data: barData.last,
        color: '#faad14'
      }
    ]
  };

  // 折线图配置
  const lineOption = {
    tooltip: {
      trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      data: ['1月', '2月', '3月', '4月', '5月', '6月']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: lineData,
        type: 'line',
        smooth: true,
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0,
              color: 'rgba(255,82,82,0.4)'
            }, {
              offset: 1,
              color: 'rgba(255,82,82,0.1)'
            }]
          }
        },
        color: '#ff5252'
      }
    ]
  };

  // 饼图配置
  const pieOption = {
    tooltip: {
      trigger: 'item'
    },
    series: [
      {
        type: 'pie',
        radius: ['40%', '70%'],
        data: pieData,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  };

  // 时间段分布热力图配置
  const timeDistributionOption = {
    tooltip: {
      position: 'top',
      formatter: function (params) {
        return `${params.data[1]} 时段<br/>活跃度: ${params.data[2]}`;
      }
    },
    grid: {
      top: '60px',
      bottom: '20px'
    },
    xAxis: {
      type: 'category',
      data: Array.from({ length: 24 }, (_, i) => `${i.toString().padStart(2, '0')}:00`),
      splitArea: {
        show: true
      }
    },
    yAxis: {
      type: 'category',
      data: ['周日', '周六', '周五', '周四', '周三', '周二', '周一'],
      splitArea: {
        show: true
      }
    },
    visualMap: {
      min: 0,
      max: 3,
      calculable: true,
      orient: 'horizontal',
      left: 'center',
      top: '0',
      text: ['高', '低'],
      inRange: {
        color: ['#e9f7fe', '#4fc3f7', '#2196f3']
      }
    },
    series: [{
      name: '时间分布',
      type: 'heatmap',
      data: heatmapData,
      label: {
        show: true,
        formatter: function(params) {
          return params.data[2] > 0 ? params.data[2] : '';
        }
      },
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }]
  };

  return (
    <div style={{ padding: '24px' }}>
      <Row gutter={[16, 16]}>
        {cardData.map((card, index) => (
          <Col span={8} key={index}>
            <Card>
              <h3>{card.title}</h3>
              <div style={{ color: card.color, fontSize: '30px', fontWeight: 'bold' }}>
                {card.value}
                <ArrowUpOutlined style={{ fontSize: '16px', marginLeft: '8px' }} />
              </div>
            </Card>
          </Col>
        ))}
      </Row>

      <Row gutter={[16, 16]} style={{ marginTop: '16px' }}>
        <Col span={24}>
          <Card title="时间段分布">
            <ReactECharts option={timeDistributionOption} style={{ height: '400px' }} />
          </Card>
        </Col>
      </Row>

      <Row gutter={[16, 16]} style={{ marginTop: '16px' }}>
        <Col span={24}>
          <Card title="访问量趋势">
            <ReactECharts option={barOption} style={{ height: '300px' }} />
          </Card>
        </Col>
      </Row>

      <Row gutter={[16, 16]} style={{ marginTop: '16px' }}>
        <Col span={12}>
          <Card title="产品分布">
            <ReactECharts option={pieOption} style={{ height: '300px' }} />
          </Card>
        </Col>
        <Col span={12}>
          <Card title="增长趋势">
            <ReactECharts option={lineOption} style={{ height: '300px' }} />
          </Card>
        </Col>
      </Row>
    </div>
  );
};

export default Dashboard; 